import React, { Component } from 'react'
import { connect } from 'react-redux'
import { initToDoAction, changeAction, deleteAction, editAction } from '../../store/actionCreator'
import './index.scss'

class Content extends Component {
  constructor(props) {
    super(props);
    var json = JSON.parse(window.localStorage.getItem('todoList')) || []
    props.initToDo(json)
    document.addEventListener('click', (e) => { this.clickHandler(e) })
  }
  state = {
    currentId: "",
    preId: "",
    preIpt: "",
    currentIpt: ""
  }
  clickHandler(e) {
    if (e.target.className === 'p-1' || e.target.className === "date") {
      if (e.target.className === 'p-1') {
        e.target.parentNode.children[2].focus()
      } else {
        e.target.parentNode.parentNode.children[2].focus()
      }
      if (this.state.preId) {
        this.props.edit(this.state.preId, this.state.preIpt.value)
      }
    } else {
      if (this.state.currentId) {
        this.props.edit(this.state.currentId, this.state.currentIpt.value)
        this.setState({
          preId: "",
          currentId: "",
          preIpt: "",
          currentIpt: ""
        })
      }
    }
  }
  render() {
    let { ToDoList } = this.props
    let completeList = ToDoList.length ? ToDoList.filter((v, i) => v.complete) : []
    let unCompleteList = ToDoList.length ? ToDoList.filter((v, i) => !v.complete) : []
    return (
      <section>
        <h2>正在进行 <span id="todocount">{unCompleteList.length}</span></h2>
        <ul id="todolist" className="demo-box">
          {
            unCompleteList.map((v, i) => {
              return (
                <li key={v.id}>
                  <input className='checkbox' type="checkbox" checked={v.complete} onChange={() => { this.props.completeChange(v.id, v.complete) }}></input>
                  {<p className="p-1" style={!v.edit ? null : { display: "none" }} onClick={(e) => {
                    if (!this.setState.id) {
                      this.setState({
                        preId: this.state.currentId,
                        currentId: v.id,
                        preIpt: this.state.currentIpt,
                        currentIpt: e.currentTarget.parentNode.children[2]
                      })
                    }
                    this.props.edit(v.id)
                  }}>{v.title}
                    <i className="date">{v.date}</i>
                  </p>}
                  {<input className='edit' style={v.edit ? null : { display: "none" }} type="text" defaultValue={v.title} onKeyDown={(e) => {
                    if (e.keyCode === 13) {
                      this.setState({
                        preId: "",
                        currentId: "",
                      })
                      this.props.edit(v.id, e.target.value, true)
                    }
                  }} />}
                  <span onClick={() => { this.props.deleteToDo(v.id) }}>-</span>
                </li>
              )
            })
          }
        </ul>
        <h2>已经完成 <span id="donecount">{completeList.length}</span></h2>
        <ul id="donelist" className="demo-box">
          {
            completeList.map((v, i) => {
              return (
                <li key={v.id}>
                  <input className='checkbox' type="checkbox" checked={v.complete} onChange={() => { this.props.completeChange(v.id, v.complete) }}></input>
                  {<p className="p-1" style={!v.edit ? null : { display: "none" }} onClick={(e) => {
                    if (!this.setState.id) {
                      this.setState({
                        preId: this.state.currentId,
                        currentId: v.id,
                        preIpt: this.state.currentIpt,
                        currentIpt: e.currentTarget.parentNode.children[2]
                      })
                    }
                    this.props.edit(v.id)
                  }}>{v.title}
                    <i className="date">{v.date}</i>
                  </p>}
                  {<input className='edit' style={v.edit ? null : { display: "none" }} type="text" defaultValue={v.title} onKeyDown={(e) => {
                    if (e.keyCode === 13) {
                      this.setState({
                        preId: "",
                        currentId: "",
                      })
                      this.props.edit(v.id, e.target.value, true)
                    }
                  }} />}
                  <span onClick={() => { this.props.deleteToDo(v.id) }}>-</span>
                </li>
              )
            })
          }
        </ul>
      </section>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    ToDoList: state.ToDoList
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    initToDo: (data) => {
      dispatch(initToDoAction(data))
    },
    completeChange: (i, complete) => {
      dispatch(changeAction(i, complete))
    },
    deleteToDo: (id) => {
      dispatch(deleteAction(id))
    },
    edit: (id, txt, bool) => {
      dispatch(editAction(id, txt, bool))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Content)
